<template>
  <div class="login">
    <!-- 导航区域 -->
    <navTop>用户注册</navTop>
    <section class="page">
      <!-- 用户名，密码，邮箱 -->
      <div class="register-page" v-show="!securityShow">
        <div class="register-wrap">
          <div class="register-text" @mouseleave.stop="blurText">
            <input
              type="text"
              class="register-username"
              placeholder="请输入用户名"
              v-model="username"
              @mouseenter.stop="focusText"
            />
            <i
              class="iconfont icon-quxiao"
              data-close="username"
              @click="clearText"
              v-show="usernameClose"
            ></i>
          </div>
          <div class="register-text" @mouseleave="blurText">
            <input
              type="password"
              class="register-password"
              placeholder="请输入密码"
              v-model="password"
              @mouseenter="focusText"
            />
            <i
              class="iconfont icon-quxiao"
              data-close="password"
              v-show="passwordClose"
              @click="clearText"
            ></i>
          </div>
          <div class="register-text" @mouseleave="blurText">
            <input
              type="text"
              class="register-email"
              placeholder="请输入邮箱"
              v-model="email"
              @mouseenter="focusText"
            />
            <i
              class="iconfont icon-quxiao"
              data-close="email"
              v-show="emailClose"
              @click="clearText"
            ></i>
          </div>
          <div class="register-text" @mouseleave="blurText">
            <input
              type="text"
              class="register-phone"
              placeholder="请输入手机号"
              v-model="phone"
              @mouseenter="focusText"
            />
            <i
              class="iconfont icon-quxiao"
              data-close="phone"
              v-show="phoneClose"
              @click="clearText"
            ></i>
          </div>
        </div>
      </div>
      <div class="register-error">{{ errMsg }}</div>
      <button @click="nextStep" class="next">下 一 步</button>
      <!-- 密保下一步 -->
      <transition name="slide">
        <div class="set-security" v-show="securityShow">
          <div class="set-security-head">
            <span>设置密保问题</span>
          </div>
          <p>设置的密保问题和答案将用于忘记密码时重置密码!</p>
          <div class="register-page">
            <div class="register-wrap">
              <div class="register-text" @mouseleave="blurText">
                <input
                  type="text"
                  class="register-question"
                  placeholder="请输入密保问题"
                  v-model="question"
                  @mouseenter="focusText"
                />
                <i
                  class="iconfont icon-quxiao"
                  data-close="question"
                  v-show="questionClose"
                  @click="clearText"
                ></i>
              </div>
              <div class="register-text" @mouseleave="blurText">
                <input
                  type="password"
                  class="register-answer"
                  placeholder="请输入密保答案"
                  v-model="answer"
                  @mouseenter="focusText"
                />
                <i
                  class="iconfont icon-quxiao"
                  data-close="answer"
                  v-show="answerClose"
                  @click="clearText"
                ></i>
              </div>
            </div>
          </div>
          <div class="register-error">{{ errMsg }}</div>
          <button class="register-button next" @click="registerSubmit">
            立 即 注 册
          </button>
          <button @click="nextStep" class="previous">上一步</button>
        </div>
      </transition>
    </section>
  </div>
</template>

<script>
import navTop from "../../components/navTop.vue";
import { userRegister } from "../../api";
export default {
  components: {
    navTop,
  },
  data() {
    return {
      // 用户名
      username: "",
      //   密码
      password: "",
      //   邮箱
      email: "",
      //   手机号
      phone: "",
      //   密保问题
      question: "",
      //   密保答案
      answer: "",
      //   记录下一步
      securityShow: false,
      //记录错误
      errMsg: "",
      //   记录取消显示状态
      usernameClose: false,
      passwordClose: false,
      emailClose: false,
      phoneClose: false,
      questionClose: false,
      answerClose: false,
    };
  },
  methods: {
    registerSubmit() {
      if (this.username == "") {
        return (this.errMsg = "请输入用户名");
      } else if (this.password == "") {
        return (this.errMsg = "请输入密码");
      } else if (this.phone == "") {
        return (this.errMsg = "请输入手机号");
      } else if (this.email == "") {
        return (this.errMsg = "请输入邮箱");
      } else if (this.question == "") {
        return (this.errMsg = "请输入密保问题");
      } else if (this.answer == "") {
        return (this.errMsg = "请输入密保答案");
      }
      let params = {
        username: this.username,
        password: this.password,
        phone: this.phone,
        email: this.email,
        question: this.question,
        answer: this.answer,
      };
      userRegister(params).then((res) => {
        if (res.status !== 0) {
          this.errMsg = res.message;
        } else {
          this.$router.push("/user");
        }
      });
    },
    nextStep() {
      this.securityShow = !this.securityShow;
    },
    // input手指触发，离开 取消显示状态
    focusText(e) {
      this.judgeText(e.currentTarget, true);
    },
    blurText(e) {
      let tex = e.currentTarget.firstChild.value.trim();
      let pla = e.currentTarget.firstChild.placeholder;
      const curr = new Promise((resolve) => {
        resolve(true);
      }).then(() => {
        tex == "" ? (this.errMsg = pla) : "";
        tex !== "" ? (this.errMsg = "") : "";
      });
      const promise = new Promise((resolve) => {
        resolve(e);
      }).then((e) => {
        this.judgeText(e.currentTarget.firstChild, false);
      });
      async () => {
        // 判断是否为空，为空出现提示
        await curr;
        // 隐藏清空图标
        await promise;
      };
    },
    // 记录取消状态
    judgeText(event, boolean) {
      let $className = event.className;
      switch ($className) {
        case "register-username":
          this.usernameClose = boolean;
          break;
        case "register-password":
          this.passwordClose = boolean;
          break;
        case "register-email":
          this.emailClose = boolean;
          break;
        case "register-phone":
          this.phoneClose = boolean;
          break;
        case "register-question":
          this.questionClose = boolean;
          break;
        case "register-answer":
          this.answerClose = boolean;
          break;
      }
    },
    // 删除内容
    clearText(e) {
      // console.log("触发");
      let $close = e.currentTarget.getAttribute("data-close");
      this[$close] = "";
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/common/style/mixin.scss";
.page {
  margin-top: 100px;
  padding: 0 50px;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  .register-page {
    margin-top: 60px;
    .register-wrap {
      width: 100%;
      .register-text {
        @include fj;
        width: 100%;
        height: 60px;
        line-height: 60px;
        padding: 20px 0;
        margin-top: 20px;
        border-bottom: 1px solid #dcdcdc;
        .iconfont {
          font-size: 40px;
          color: #cccccc;
          &.eye {
            padding: 0 30px;
            font-size: 40px;
            border-right: 1px solid #dcdcdc;
          }
        }

        input {
          width: 100%;
          height: 100%;
          margin-right: 20px;
          line-height: 60px;
          color: #222;
          font-size: 32px;
        }

        span {
          padding-left: 20px;
          font-size: 30px;
        }

        div {
          display: flex;
        }
      }
    }
  }

  .register-error {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 30px 0;
    color: $red;
    font-size: 26px;
  }

  .register-button {
    width: 100%;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
    font-size: 32px;
    background: rgba(246, 53, 21, 0.5);
    @include borderRadius(60px);

    &.active {
      background: rgb(246, 53, 21);
    }
  }

  .set-security {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 30px;
    z-index: 100;
    background: #fff;
    @include boxSizing;

    p {
      font-size: 30px;
      color: #999;
      padding-top: 30px;
    }

    .set-security-head {
      position: relative;
      width: 100%;
      height: 88px;
      text-align: center;
      line-height: 88px;
      font-size: 34px;
      @include boxSizing;

      //   .iconfont {
      //     position: absolute;
      //     left: 0;
      //     top: 0;
      //     font-size: 60px;
      //     font-weight: bold;
      //   }
    }
  }

  .slide-enter-active,
  .slide-leave-active {
    transition: all 0.5s;
  }

  .slide-enter,
  .slide-leave-to {
    transform: translate3d(100%, 0, 0);
  }
}
// 下一步
.next {
  margin-top: 50px;
  margin-left: 50%;
  width: 90%;
  height: 100px;
  transform: translateX(-50%);
  border-radius: 50px;
  background: rgba(246, 53, 21, 0.5);
  color: white;
  font-size: 30px;
}
// 上一步
.previous {
  margin-top: 50px;
  margin-left: 50%;
  width: 100%;
  height: 100px;
  transform: translateX(-50%);
  border-radius: 50px;
  background: rgba(246, 53, 21, 0.5);
  color: white;
  font-size: 30px;
}
</style>